<template>
  <div class="guide">
    <nut-overlay v-model:visible="state.isShow" :close-on-click-overlay="false">
      <nut-image
        @click="nextStep"
        class="guideImg"
        :src="getAssetsFile('guide/step3.png')"
        fit="contain"
      />
      <div class="nextStep" @click="nextStep"></div>
    </nut-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { getAssetsFile } from "@/utils/pub-use";
import { stopMove } from "@/utils/pub-use";
import { onMounted } from "vue";
import { onBeforeUnmount } from "vue";
const state = reactive({
  isShow: true,
  isLock: true,
});
const emits = defineEmits(["next"]);
const nextStep = () => {
  emits("next", 4);
};
onMounted(() => {
  stopMove();
});
onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.guide {
  position: relative;
  width: 100%;
  height: 100%;
  .nut-overlay {
    display: flex;
    justify-content: center;
    .guideImg {
      width: 711px;
      height: 907px;
      position: fixed;
      top: 204px;
    }
    .nextStep {
      position: absolute;
      bottom: 370px;
      right: 130px;
      width: 112px;
      height: 200px;
    }
  }
}
</style>
